import { FC } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import sui_icon from '@/assets/images/index/banner-btn-icon.png'
import './index.scss'

interface ISwiperShip {}

const SwiperShip: FC<ISwiperShip> = () => {

	const { t } = useTranslation()


	return (
		<div id="swiper-ship">
            <div className="swiper-ship-left">
                <div className="swiper-ship-title">
                    Airship -
                    <span className="swiper-ship-title-nft"> NFT</span>
                </div>
                <div className="ship-total flex">
                    <div className="for-sale-total">{t('indexBanner.total')} 5,000</div>
                    <div className="for-sale">{t('indexBanner.receive')} 3,121</div>
                </div>
                <div className="ship-reserve">{t('indexBanner.preSale')} 1,000</div>
                <p className="ship-reserve-desc">{t('indexBanner.preSale1')}</p>
                <p className="ship-reserve-desc">{t('indexBanner.preSale2')}</p>
                <p className="ship-reserve-desc">{t('indexBanner.preSale3')}</p>
                <p className="ship-reserve-desc">{t('indexBanner.preSale4')}</p>
                <p className="ship-reserve-desc">{t('indexBanner.preSale5')}</p>
                <div className="ship-free-reserve-btn">
                    <div className="btn-water btn flex-center">
                        <img src={sui_icon} alt="" />
                        25 SUI
                    </div>
                    <div className="btn-receive btn">
                    {t('indexBanner.draw')} 10,000 SHUI
                    </div>
                </div>
            </div>
            <div className="swiper-ship-right">
                <img src="" alt="" />
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(SwiperShip)